<style scoped lang="scss">
      .lists {
        .list {
          cursor: pointer;
          border-radius: 2px;
          overflow: hidden;
          margin-bottom: 15px;
          .header {
            font-size: 13px;
            height: 35px;
            width: 100%;
            position: relative;
            line-height: 35px;
            background-color: #efefef;
            font-weight: 600;
            .task {
              float: left;
              width: 15px;
              height: 15px;
              margin: 10px 8px;
              background: url("../../assets/img/task01.png") no-repeat center
                center;
              background-size: 15px;
            }
            .name {
              float: left;
              height: 100%;
              margin-right: 35%;
              width: 130px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #212122;
            }
            .weight {
              float: left;
              margin-right: 2px;
            }
            .red {
              float: left;
              color: red;
            }
            .serial {
              display: inline-block;
              position: absolute;
              top: 0;
              right: 0;
              height: 35px;
              width: 35px;
              background: url("../../assets/img/sj1.png") no-repeat;
              background-size: 35px;
            }
            .y {
              min-width: 15px;
              min-height: 15px;
              line-height: 12px;
              text-align: center;
              color: #fff;
              border-radius: 50%;
              border: 1px solid #fff;
              position: absolute;
              top: 2px;
              right: 2px;
              z-index: 2;
              font-size: 12px;
            }
          }
          .body {
            padding: 0 10px;
            float: left;
            box-sizing: border-box;
            border: 1px solid #e2e2e2;
            background-color: #fff;
            border-radius: 0px 0px 4px 4px;
            position: relative;
            .leftActive{
              width: 3px;
              height: 60px;
              background-color: #5797f0;
              position: absolute;
              left: 0;
              top: 20px;
            }
            .p {
              width: 100%;
              height: 32px;
              line-height: 32px;
              float: left;
              .left {
                float: left;
                width: 68px;
                margin: 0;
                color: #666665;
              }
              .right {
                float: left;
                width: 300px;
                height: 32px;
                text-align: right;
                margin: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #323233;
              }
              .left1{
                width: 138px;
              }
              .right1{
                width: 230px;
              }
              .red {
                color: red;
              }
            }
            .p_last {
              float: left;
              width: 100%;
              height: 32px;
              line-height: 32px;
              text-align: center;
              color: #b9b9b9;
              .date {
                margin: 0 2px;
              }
            }
            .agreeDiv{
              width: 66px;
              height: 20px;
              text-align: center;
              color: #fff;
              position: absolute;
              right: -19px;
              bottom: 5px;
              line-height: 20px;
              transform: rotate(-45deg);
            }
            .agreeActive{
              background: #4591FF;
            }
            .bohuiActive{
              background: #FF485E;
            }
          }
          .infoBody{
            width: 100%;
            height: 130px;
            text-align: center;
            font-size: 14px;
            color: #a1a1a1;
          }
        }
        .active {
          .header {
            background: #e2ecfa;
            .task {
              float: left;
              width: 15px;
              height: 15px;
              margin: 10px 8px;
              background: url("../../assets/img/task.png") no-repeat center
                center;
              background-size: 15px;
            }
            .serial {
              display: inline-block;
              position: absolute;
              top: 0;
              right: 0;
              height: 35px;
              width: 35px;
              background: url("../../assets/img/sj.png") no-repeat;
              background-size: 35px;
            }
          }
          .body {
            background: #f3f7fb;
          }
        }
        .activeBefore{
          .header{
            background-color: #E2F3D8;
            .task{
              background: url("../../assets/img/task1.png") no-repeat center
              center;
              background-size: 15px;
            }
            .serial{
              height: 35px;
              width: 30px;
              background: url("../../assets/img/sj2.png") no-repeat;
              background-size: 30px;
            }
          }
          .body{
            background-color: #F7FBF6;
            .leftActive{
              background-color: #55B802;
            }
          }
        }
        .add{
          text-align: center;
          margin-bottom: 20px;
          button{
            width: 100%;
            height: 40px;
          }
        }
      }
</style>
<template>
  <div>
    <ul v-show="importantActive" class="lists">
      <li v-for="(item,index) in mainlist" v-show="mainlist.length !== 0" :key="index" class="list" :class="[ number === index ? 'active' : '', !importantActive && number === index ? 'activeBefore' : '']" @click="mainClick(item,index,true)">
        <div class="header">
          <div class="task" />
          <i class="name">{{ item.name }}</i>
          <i class="weight">权重:</i>
          <i class="red">{{ item.weight }}%</i>
          <div class="serial" />
          <i class="y">{{ item.detailIdentify }}</i>
        </div>
        <div class="body">
          <div v-show="number === index" class="leftActive" />
          <p class="p">
            <span class="left">任务内容</span>
            <span
              class="right"
            >{{ item.content }}</span>
          </p>
          <p class="p">
            <span class="left">完成时间</span>
            <span class="right red">{{ item.finishTime }}</span>
          </p>
          <p class="p">
            <span class="left">任务来源</span>
            <span class="right">{{ item.originalSelect }}</span>
          </p>
          <p v-show="item.empName && item.createTime" class="p_last">
            {{ item.empName }}
            <i class="date">{{ item.createTime }}</i>
            提交
          </p>
          <div v-show="opinion" class="agreeDiv" :class="item.approveResult === '1' ? 'agreeActive' : 'bohuiActive'">{{ item.approveResult === '1' ? '同意' : '驳回' }}</div>
        </div>
      </li>
    </ul>
    <ul v-show="!importantActive" class="lists">
      <li v-for="(item,index) in mainlist" :key="index" class="list" :class="[ index === number ? 'active' : '', !importantActive && number === index ? 'activeBefore' : '']" @click="mainClick(item,index,true)">
        <div class="header">
          <div class="task" />
          <i class="name">{{ item.name }}</i>
          <i class="weight">权重:</i>
          <i class="red">{{ item.weight }}%</i>
          <div class="serial" />
          <i class="y">{{ item.detailIdentify }}</i>
        </div>
        <div class="body">
          <div v-show="number === index" class="leftActive" />
          <p class="p">
            <span class="left left1">指标描述及计算公式</span>
            <span
              class="right right1"
            >{{ item.content }}</span>
          </p>
          <p class="p">
            <span class="left">2021年目标</span>
            <span class="right red">{{ item.target }}</span>
          </p>
          <p class="p">
            <span class="left">指标来源</span>
            <span class="right">{{ item.originalSelect }}</span>
          </p>
          <p v-show="item.empName && item.createTime" class="p_last">
            {{ item.empName }}
            <i class="date">{{ item.createTime }}</i>
            提交
          </p>
          <div v-show="opinion" class="agreeDiv" :class="item.approveResult === '1' ? 'agreeActive' : 'bohuiActive'">{{ item.approveResult === '1' ? '同意' : '驳回' }}</div>
        </div>
      </li>
      <li v-show="mainlist.length === 0" class="list" :class="!importantActive ? 'activeBefore' : 'active'">
        <div class="header">
          <div class="task" />
          <i class="name" />
          <i class="weight" />
          <i class="red" />
          <div class="serial" />
          <i class="y">1</i>
        </div>
        <div class="body infoBody">
          <p class="p">暂无数据</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    importantActive: {
      type: Boolean,
      default() {
        return true
      }
    },
    tabContent: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      number: 0, // 选中状态--下标
      opinion: false,
      oldInformation: {}, // 点击主任务之前的上一个的主任务的信息
      reportHistoryId: '', // 携带过来的个人唯一的id
      mainlist: [ // 存放主任务的数组

      ]
    }
  },
  watch: {
    importantActive(val) { // true=>重要任务   false=>关键指标
      if (val) {
        this.mainlist = this.tabContent.missionList
      } else {
        this.mainlist = this.tabContent.indexList
      }
      this.number = 0
    },
    tabContent(item) {
      this.mainlist = item.missionList
      this.oldInformation = this.mainlist[0]
    }
  },
  mounted() {
    if (this.$route.query.reportHistoryId) {
      this.reportHistoryId = this.$route.query.reportHistoryId
    }
    if (this.$route.query.opinion && this.$route.query.opinion === '1') {
      this.opinion = true // 控制按钮是否显示
    }
  },
  methods: {
    mainClick(item, index) { // 点击主任务事件
      this.number = index
      this.$parent.rightInformation(item)
    }
  }
}

</script>

